<template>
  <div>
    <h2>侦听器</h2>
    <input type="text" v-model.lazy="uname" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      uname: "zhangsan",
      dog: {
        name: "土豆",
        age: 2,
      },
    };
  },
  //侦听器,要写到和data平级的watch里面
  // oldVal可以不写
  watch: {
    //1.函数写法
    //侦听谁,谁就是函数名
    // uname(newVal, oldVal) {
    //   console.log(newVal, oldVal);
    // },
    //2.对象写法(写成对象,就是为了加immediate或deep选项)
    //对象格式,handler必须写,名字固定
    uname: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      immediate: true, //加入这个选项,表示立即侦听(通俗地说,打开页面马上获取初始值)
    },

    dog: {
      handler(newVal) {
        console.log(newVal);
      },
      deep: true, //深度侦听,用于侦听对象的属性变化
    },

    //只侦听对象的某个属性
    "dog.age"(newVal) {
      console.log(newVal);
    },
  },
};
</script>

<style>
</style>